<template>
	<view>

		<view>
			<uni-forms ref="form" :modelValue="formData" :rules="rules" validate-trigger="bind" err-show-type="undertext">
				<view class="v1">
					<text>用户名</text>
					<uni-forms-item class="n1"  name="username">
						<uni-easyinput class="n2" type="text" v-model="formData.username" placeholder="请输入姓名" />
					</uni-forms-item>
				</view>
				<view class="v2">
					<text>密码</text>
					<uni-forms-item class="n3"  name="password">
						<uni-easyinput class="n4" type="password" v-model="formData.password" placeholder="请输入密码" />
					</uni-forms-item>
				</view>
				<view class="v3">
					<text>确认密码</text>
					<uni-forms-item class="n7"  name="password1">
						<uni-easyinput class="n8" type="password" v-model="formData.password1" placeholder="请再次输入密码" />
					</uni-forms-item>
				</view>
						
						
				<button class="n5" @click="submit">注册</button>
			</uni-forms>
		</view>

		<view class="na">
			<navigator hover-class="none" url="/pages/login/login">已有账户，立即登录</navigator>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: '',
					password1: ''
				},

				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},
							{
								minLength: 3,
								maxLength: 15,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 3,
								maxLength: 6,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
							},
						]
					},
					password1: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 3,
								maxLength: 6,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
							},
						]
					}

				}
			}
		},

		methods: {

			submit() {
				let user = this.formData
				console.log("用户：" + user.username + user.password)
				uni.request({
					url: 'http://localhost:8081/register?username=' + user.username + '&password=' + user.password,
					/* url:'http://localhost:8081/register, */
					method: 'GET',
					/* data: {
						user
					}, */
					success: (res) => {
						if (!res.data.result) {
							uni.showToast({
								title: '注册失败'
							})
						} else {
							uni.showToast({
								title: '注册成功，返回登录'
							})
						}
					}
				})
			}

			
		}
	}
</script>

<style lang="scss">
	
	.v1{
		display: flex;//在一行显示
		text{
			width: 80px;
			margin-top:10px ;
			margin-left: 60px;
			margin-right: -20px;
			font-size: 16px;
		}
		.n2{
			margin: 5px;
			width: 220px;
		}
	}
	.v2{
		display: flex;//在一行显示
		text{
			width: 80px;
			margin-top:10px ;
			margin-left: 60px;
			margin-right: -20px;
			font-size: 16px;
		}
		.n4{
			margin: 5px;
			width: 220px;
		}
	}
	
	.n5{
		color: #E88807;
		background-color: #2C405A;
		width: 290px;
		margin-right: 25px;
	}
	
	.v3{
		display: flex;//在一行显示
		text{
			width: 80px;
			margin-top:10px ;
			margin-left: 60px;
			margin-right: -20px;
			font-size: 16px;
		}
		.n8{
			margin: 5px;
			width: 220px;
		}
	}
	
	.na{
		display: flex;//在一行显示
		justify-content:center; //左右间距
		navigator:nth-child(1){
			margin: 20px;
			color: #E88807;
		}
		navigator:nth-child(2){
			margin: 20px;
			color: #E88807;
		}
	}
	
	
</style>
